<template>
  <div class="query-condition">
    <div class="form-group">
      <label for="queryCondition">搜索：</label>
      <input type="text" id="queryCondition" v-model="queryCondition" placeholder="支持设备名称,设备设施,执行人等模糊查询">
    </div>
    <div class="form-group">
      <label for="switchFrequency">切换频率：</label>
      <select id="switchFrequency" v-model="queryType">
        <option value="switchFrequency">切换频率</option>
      </select>
    </div>
    <div class="form-group">
      <label for="status">状态：</label>
      <select id="status" v-model="queryType">
        <option value="status">状态</option>
      </select>
    </div>
    <div class="form-group">
      <label for="needAcceptance">验收：</label>
      <select id="needAcceptance" v-model="needAcceptance">
        <option value="needAcceptance">是</option>
      </select>
    </div>
    <!-- TODO 执行时间 日期选择器 -->
    <div class="form-group">
      <label for="executionTime">执行时间：</label>
      <select id="executionTime" v-model="executionTime">
        <option value="executionTime">执行时间</option>
      </select>
    </div>
    <div class="form-group form-group-button" style="margin-left: auto;">
      <button @click="query">查询</button>
      <button @click="reset">重置</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryCondition: '', // 查询条件
      queryType: 'deviceName', // 查询类型
      needAcceptance: null, // 验收状态
      executionTime: null, // 执行时间
    };
  },
  methods: {
    query() {
      // 执行查询操作
      console.log('查询条件：', this.queryCondition);
      console.log('查询类型：', this.queryType);
      console.log('验收状态：', this.needAcceptance);
      console.log('执行时间：', this.executionTime);
    },
    reset() {
      // 重置查询条件
      this.queryCondition = '';
      this.queryType = 'deviceName';
      this.needAcceptance = null;
      this.executionTime = null;
    },
  },
};
</script>

<style scoped> 

.query-condition {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.form-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

label {
  margin-right: 10px;
  min-width: 80px;
  text-align: left;
}

input, select, button {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  flex-grow: 1;
}

button {
  cursor: pointer;
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 5px 10px;
}

button:hover {
  background-color: #45a049;
}
</style>
